// 初始化属性
let timer = null;
var mapDataRender = [];
// 在组件实例中使用方便展示，在编辑区以及预览区使用不到
var timeDate = "map" + new Date().getTime();
var mapGeoJson;
var center = {
  南京市: [118.767413, 32.041544],
  无锡市: [120.301663, 31.574729],
  徐州市: [117.184811, 34.261792],
  常州市: [119.946973, 31.772752],
  苏州市: [120.619585, 31.299379],
  南通市: [120.864608, 32.016212],
  连云港市: [119.178821, 34.600018],
  淮安市: [119.021265, 33.597506],
  盐城市: [120.139998, 33.377631],
  扬州市: [119.421003, 32.393159],
  镇江市: [119.452753, 32.204402],
  泰州市: [119.915176, 32.484882],
  宿迁市: [118.275162, 33.963008],
};
async function defineComponentProps() {
  const componentProps = {
    mapInfo: {
      dataType: 1,
      mapName: "广州市",
      url: "",
      mapCode: "440100",
    },
  };
  option = {
    backgroundColor: "",
    // visualMap: {
    //   show: false,
    //   max: 100,
    //   seriesIndex: [3],
    //   inRange: {
    //     color: ["rgba(165,220,244,1)", "rgba(0,110,221,1)"],
    //   },
    // },
    geo: [
      {
        map: timeDate,
        roam: false, //是否允许缩放
        zoom: 1.1, //默认显示级别
        scaleLimit: {
          min: 0,
          max: 3,
        }, //缩放级别
        itemStyle: {
          normal: {
            areaColor: "#013C62",
            shadowColor: "#013C62",
            shadowBlur: 20,
            shadowOffsetX: -5,
            shadowOffsetY: 15,
          },
        },
        tooltip: {
          show: false,
        },
      },
    ],
    series: [
      {
        type: "effectScatter",
        coordinateSystem: "geo",
        z: 5,
        data: [],
        symbolSize: 14,
        label: {
          normal: {
            show: true,
            formatter: function (params) {
              return (
                "{fline|地点：" +
                params.data.city +
                "}\n{tline|" +
                (params.data.info || "发生xx集件") +
                "}"
              );
            },
            position: "top",
            backgroundColor: "rgba(254,174,33,.8)",
            padding: [0, 0],
            borderRadius: 3,
            lineHeight: 32,
            color: "#f7fafb",
            rich: {
              fline: {
                padding: [0, 10, 10, 10],
                color: "#ffffff",
              },
              tline: {
                padding: [10, 10, 0, 10],
                color: "#ffffff",
              },
            },
          },
          emphasis: {
            show: true,
          },
        },
        itemStyle: {
          color: "#feae21",
        },
      },
      {
        type: "effectScatter",
        coordinateSystem: "geo",
        z: 5,
        data: [],
        symbolSize: 14,
        label: {
          normal: {
            show: true,
            formatter: function (params) {
              return (
                "{fline|地点：" +
                params.data.city +
                "}\n{tline|" +
                (params.data.info || "发生xx集件") +
                "}"
              );
            },
            position: "top",
            backgroundColor: "rgba(233,63,66,.9)",
            padding: [0, 0],
            borderRadius: 3,
            lineHeight: 32,
            color: "#ffffff",
            rich: {
              fline: {
                padding: [0, 10, 10, 10],
                color: "#ffffff",
              },
              tline: {
                padding: [10, 10, 0, 10],
                color: "#ffffff",
              },
            },
          },
          emphasis: {
            show: true,
          },
        },
        itemStyle: {
          color: "#e93f42",
        },
      },
      {
        type: "effectScatter",
        coordinateSystem: "geo",
        z: 5,
        data: [],
        symbolSize: 14,
        label: {
          normal: {
            show: true,
            formatter: function (params) {
              return (
                "{fline|地点：" +
                params.data.city +
                "}\n{tline|" +
                (params.data.info || "发生xx集件") +
                "}"
              );
            },
            position: "top",
            backgroundColor: "rgba(8,186,236,.9)",
            padding: [0, 0],
            borderRadius: 3,
            lineHeight: 32,
            color: "rgba(255,255,255,1)",
            rich: {
              fline: {
                padding: [0, 10, 10, 10],
                color: "#ffffff",
              },
              tline: {
                padding: [10, 10, 0, 10],
                color: "#ffffff",
              },
            },
          },
          emphasis: {
            show: true,
          },
        },
        itemStyle: {
          color: "#08baec",
        },
      },
      //地图
      {
        type: "map",
        mapType: timeDate,
        geoIndex: -1,
        zoom: 1.1, //默认显示级别
        label: {
          show: true,
          color: "rgba(255,255,255,1)",
          fontSize: 12,
          fontFamily: "Microsoft YaHei",
          emphasis: {
            color: "rgba(199, 21, 133, 1)",
            show: false,
          },
        },
        itemStyle: {
          normal: {
            borderColor: "#2980b9",
            borderWidth: 1,
            areaColor: "rgba(14,149,241,1)",
          },
          emphasis: {
            areaColor: "#FA8C16",
            borderWidth: 0,
            color: "green",
          },
        },
        data: Object.keys(center).map((name) => {
          return {
            name: name,
            value: Math.random() * 100,
          };
        }),
      },
    ],
  };

  componentProps.options = option;

  // 返回组件属性
  return componentProps;
}

// 组件创建前
async function defineComponentBeforeCreated({ VueElement }) {
  // console.log("map003 defineComponentBeforeCreated");
  try {
    if (VueElement) {
      // 兼容2.5的写法，已经无全局变量需要调整处理
      if (
        VueElement.component.props &&
        VueElement.component.props.mapInfo.json
      ) {
        // 刷新后读取最新的数据
        window[`${VueElement.id}mapGepJson`] =
          VueElement.component.props.mapInfo.json;
      } else {
        // 若无切换图层则使用默认的数据
        // mapUrl地址会在SDA2.5中进行默认转换
        let mapUrl =
          BASE_URL +
          "/adminapp/public/assets/elfinder/files/json/geo/广州.json";
        let getMapJson = function () {
          return fetch(mapUrl).then((res) => res.json());
        };
        window[`${VueElement.id}mapGepJson`] = await getMapJson();
      }
      echarts.registerMap(VueElement.id, window[`${VueElement.id}mapGepJson`]);
    } else {
      // 兼容在组件库展示效果的写法
      let mapUrl =
        BASE_URL + "/adminapp/public/assets/elfinder/files/json/geo/广州.json";
      let getMapJson = function () {
        return fetch(mapUrl).then((res) => res.json());
      };
      mapGeoJson = await getMapJson();
      echarts.registerMap(VueElement ? VueElement.id : timeDate, mapGeoJson);
    }
  } catch (error) {
    console.log("error1", error);
  }
}

// 组件创建后
async function defineComponentCreated({ VueInstance, VueElement }) {
  // console.log("map003 defineComponentCreated");
  try {
    if (VueElement && VueInstance) {
      // 由于在defineComponentBeforeCreated生命周期中，无法获取VueInstance，所以在此生命周期重置地图唯一标识
      VueInstance.options.geo[0].map = VueElement.id;
      VueInstance.options.series[3].mapType = VueElement.id;
      const myChart = VueInstance.getEChartInstance();
      center = {
        南京市: [118.767413, 32.041544],
        无锡市: [120.301663, 31.574729],
        徐州市: [117.184811, 34.261792],
        常州市: [119.946973, 31.772752],
        苏州市: [120.619585, 31.299379],
        南通市: [120.864608, 32.016212],
        连云港市: [119.178821, 34.600018],
        淮安市: [119.021265, 33.597506],
        盐城市: [120.139998, 33.377631],
        扬州市: [119.421003, 32.393159],
        镇江市: [119.452753, 32.204402],
        泰州市: [119.915176, 32.484882],
        宿迁市: [118.275162, 33.963008],
      };
      timer = setInterval(() => {
        //数据情况重绘，清除formatter移动效果，也可根据自身需求是否需要，删除这两行代码
        /*option.series[seriesjson[runidx].createType-1].data = [];
          myChart.setOption(option, true);*/
        for (var i = 0; i < 3; i++) {
          VueInstance.options.series[i].data = [];
        }
        var cityIndex = Math.floor(Math.random() * 13);
        var runidx = Math.floor(Math.random() * 3);
        var coordCity = Object.keys(center)[cityIndex];
        var coord = center[coordCity];
        VueInstance.options.series[runidx].data = [
          {
            city: coordCity,
            value: coord,
          },
        ];
        // console.log(option.series[runidx].data)
        // console.log("---",VueInstance.options.series[4].data)
        // VueInstance.options.series[4].data = VueInstance.options.series[4].data.sort(function(a,b){
        //     return b.value-a.value;
        // });
        myChart.setOption(VueInstance.options, true);
      }, Math.floor(Math.random() * 10000) + 1000);
    }
  } catch (error) {
    console.log("error2", error);
  }
}

async function updateMap(data, VueInstance) {
  let mapGeoJsonData = data;
  echarts.registerMap(VueInstance.options.geo[0].map, mapGeoJsonData);
  mapDataRender = mapGeoJsonData.features.map((item) => {
    return {
      value: (Math.random() * 1000).toFixed(2),
      name: item.properties.name,
    };
  });
  if (VueInstance) {
    VueInstance.options.series[0].data = mapDataRender;
    VueInstance.updateOptions(VueInstance.options);
  }
}

async function handleDataCallback({ ResourceData, VueInstance }) {
  // console.log("map003 handleDataCallback");
  VueInstance && updateMap(ResourceData, VueInstance);
}
